<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扫码支付小案例</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/qrcode.js"></script>
    <style>
        .button.blue{
            border:1px solid #1e7db9;
            background: -webkit-linear-gradient(top,#42a4e0,#2e88c0);
        }
    </style>
</head>
<body>
          <button onclick="check()" style="height:35px" class="button blue">点击按钮获取支付二维码</button>
          <hr>
          商品订单号：<input id="orderNumber" style="width:16%" disabled>
          <hr>
          <!--div生成二维码-->
         <div id="code" align="center"></div>
          <hr>

</body>
<script>

     function openyin() {
         var audio = document.createElement("audio");
         audio.setAttribute("src", "./yinpin/voice.wav");
         audio.load();
         audio.play();
     }
    // 点击生成支付验证码
     function check() {
         if( document.getElementById("orderNumber").value==''){
             alert("请先下单去吧！")
         }else{
             openyin();
             var orderNumber = $("#orderNumber").val();
             if(orderNumber==null){
                 alert("订单号未获取，请检查websocket链接！")
                 return;
             }
             $.post("http://504086d1.r1.cpolar.top/wx/check?orderNumber="+orderNumber,function (res) {
                 if(res.code==1&&res.data!=null){
                     //  构造一个二维码数据对象
                     var qrcode = new QRCode(document.getElementById("code"), {
                         width : 150,
                         height : 150
                     });
                     //  生成二维码   res.data 是扫描二维码展示的数据
                     qrcode.makeCode(res.data)

                 }else{
                     alert("二维码获取失败！")
                 }
             })
         }
     }

     // websocket     链接配置
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else{
            console.log("您的浏览器支持WebSocket");
            //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
            //等同于socket = new WebSocket("ws://localhost:8080/xxxx");
            var socketUrl="ws://504086d1.r1.cpolar.top/ws/code_"+Math.random().toString(36).substr(2);;
            console.log(socketUrl);
            if(socket!=null){
                socket.close();
                socket=null;
            }
            var socket = new WebSocket(socketUrl);
            //打开事件
            socket.onopen = function() {
                console.log("websocket已打开");
                //socket.send("这是来自客户端的消息" + location.href + new Date());
            };
            //获得消息事件
            socket.onmessage = function(msg) {
                console.log(msg.data);
                //发现消息进入    开始处理前端触发逻辑
                document.getElementById("orderNumber").value="";
                document.getElementById("orderNumber").value=msg.data;
                alert("----您有订单！点击扫码支付---")

            };
            //关闭事件
            socket.onclose = function() {
                console.log("websocket已关闭");
            };
            //发生了错误事件
            socket.onerror = function() {
                console.log("websocket发生了错误");
            }
        }


    function sclose() {
        socket.close();
    }

    function sendMessage() {
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else {
            console.log("您的浏览器支持WebSocket");
            var text = document.getElementById("contentText").value;
            socket.send(text);
        }
    }
</script>
</html>
